<template>
  <div class="medal" :style="medalStyle(exp.grade, exp.status, exp.endline)" @click.right.stop="showDia"
    oncontextmenu="return false;">
    <div v-if="hasExp" class="medal-title">{{ exp.grade + "/" + exp.totalGrade }}</div>
    <div v-if="hasExp" class="medal-description">{{ exp.subjectName + " " + exp.username }}</div>
    <div v-else class="medal-title">暂无数据</div>
    <el-dialog title="作业详情" :visible.sync="dialogTableVisible" :destroy-on-close="true">
      <el-table :data="[exp]">
        <el-table-column property="subjectName" label="课程名" width="150"></el-table-column>
        <el-table-column property="username" label="任课老师" width="100"></el-table-column>
        <el-table-column property="comments" label="老师评价" width="100"></el-table-column>
        <el-table-column property="endline" label="截止时间" width="180"></el-table-column>
        <!-- 新增自定义列 -->
        <el-table-column label="得分/总分" width="100">
          <template slot-scope="scope">
            {{ scope.row.grade }} / {{ scope.row.totalGrade }}
          </template>
        </el-table-column>
      </el-table>
      <el-button style="margin-top: 10px;" @click="delExp()">删除</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { delExp } from '@/utils/urlManager';
import axios from 'axios';

export default {
  props: {
    exp: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      dialogTableVisible: false,
      hasExp: false
    };
  },
  mounted() {
    this.exp.expId > 0 ? this.hasExp = true : this.hasExp = false;
  },
  methods: {
    showDia() {
      this.dialogTableVisible = true;
    },
    handleClose(done) {
      this.dialogTableVisible = false;
      done();
    },
    medalStyle(grade, subStatus, endline) {
      const endline_1 = new Date(endline);
      const now = new Date();
      if (subStatus == "NotSubmitted" && endline_1 < now) {
        return { backgroundColor: "rgb(190, 190, 190)" }
      }
      if (subStatus == "NotSubmitted") {
        return { backgroundColor: "yellow" };
      }
      if (grade >= 90) {
        return { backgroundColor: "rgba(0,250,0,0.5)" };
      } else if (grade < 60 && grade > 0) {
        return { backgroundColor: "rgba(250,0,0,0.5)" };
      } else {
        return { backgroundColor: "white" };
      }
    },
    delExp() {
      this.$confirm('确定要删除该作业记录吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(delExp, {
          params: {
            id: this.exp.expId
          }
        })
        .then((res) => {
          const result = res.data;
          if (result.data > 0) {
            this.$message.success("删除成功。数据会有延迟，请刷新网页获取最新数据");
            this.$emit('delete-exp');
          } else {
            this.$message.warning("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("操作错误！");
        });
      }).catch(() => {
        // this.$message.info("已取消删除操作");
      });
    }
  },
};
</script>

<style scoped>
.medal {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.medal-title {
  font-weight: bold;
  margin: 10px 0;
}

.medal-description {
  font-size: 0.8em;
  color: #666;
}
</style>